var alink = document.querySelectorAll(".navContainer>.msgbox>a")
// console.log('alink---',alink);
alink.forEach(function (element, index) {
    element.addEventListener("click", function () {

        for (var i = 0; i < alink.length; i++) {
            alink[i].className = ""
        }
        this.className = "active"
    })
})
var index = 0;
var hoverimg = document.querySelector(".section3 .hoverBox>img")
var hoverBox = document.querySelector(".section3 .msgBoxLe .hoverBox")
hoverBox.addEventListener("mouseover", function () {
    // console.log("事件产生")

    var ImgMovetimer = setInterval(function () {
        index = index + 1;
        if (index == 340) {
            index = 0
        }
        hoverimg.style.marginTop = index + "px";
    }, 20)
    hoverBox.addEventListener("mouseout", function () {

        clearInterval(ImgMovetimer)
    })
})

var le1 = document.querySelector(".section .imgMsgBox .msgImgLe")
var ri1 = document.querySelector(".section .imgMsgBox .msgImgRi")
var le2 = document.querySelector(".section2 .imgMsgBox2 .MsgLf")
var ri2 = document.querySelector(".section2 .imgMsgBox2 .MsgRi")
var le3 = document.querySelector(".imgMsgBox3 .msgBoxLe")
var ri3 = document.querySelector(".imgMsgBox3 .msgBoxRi")
var le4 = document.querySelector(".imgMsgBox4 .msgBoxLe")
var ri4 = document.querySelector(".imgMsgBox4 .msgBoxRi")
var le5 = document.querySelector(".imgMsgBox5 .msgBoxLe")
var ri5 = document.querySelector(".imgMsgBox5 .msgBoxRi")
window.addEventListener("scroll", function () {
    // console.log(document.documentElement.scrollTop)


    if (document.documentElement.scrollTop >= 500) {


        le1.previousElementSibling.style.transform = "translateX(0px)"
        le1.previousElementSibling.style.opacity = "1"

        le1.children[0].style.transform = "translateY(0px)"
        le1.children[0].style.opacity = "1"

        le1.children[1].style.transform = "translateY(0px)"
        le1.children[1].style.opacity = "1"

        le1.children[2].style.transform = "translateY(0px)"
        le1.children[2].style.opacity = "1"

        le1.children[3].style.transform = "translateY(0px)"
        le1.children[3].style.opacity = "1"
        le1.style.opacity = "1"
        ri1.style.transform = "translateX(0px)"
        ri1.style.opacity = "1"
    }


    if (document.documentElement.scrollTop >= 1200) {
        ri2.children[0].style.transform = "translateY(0px)"
        ri2.children[0].style.opacity = "1"
        ri2.children[1].children[0].style.transform = "translateY(0px)"
        ri2.children[1].children[0].style.opacity = "1"
        ri2.children[1].nextElementSibling.style.transform = "translateY(0px)"
        ri2.children[1].nextElementSibling.style.opacity = "1"
        ri2.children[1].nextElementSibling.nextElementSibling.style.transform = "translateY(0px)"
        ri2.children[1].nextElementSibling.nextElementSibling.style.opacity = "1"

        le2.style.transform = "translateX(0px)"
        le2.style.opacity = "1"

    }
    if (document.documentElement.scrollTop >= 2000) {

        le3.children[0].style.opacity = "1"
        le3.children[0].style.width = "100%"
        le3.children[1].style.opacity = "1"
        le3.children[1].style.transform = "translateX(0px)"
        le3.children[2].style.opacity = "1"
        le3.children[2].style.transform = "translateX(0px)"
        le3.children[3].style.opacity = "1"
        le3.children[3].nextElementSibling.style.opacity = "1"

        ri3.style.transform = "translateX(0px)"
        ri3.style.opacity = "1"
    }
    if (document.documentElement.scrollTop >= 2700) {

        le4.style.transform = "translateX(0px)"
        le4.style.opacity = "1"
        ri4.children[1].style.transform = " translateX(0px)"
        ri4.children[1].style.opacity = "1"
        ri4.children[2].style.transform = " translateX(0px)"
        ri4.children[2].style.opacity = "1"
        ri4.children[3].style.transform = " translateX(0px)"
        ri4.children[3].style.opacity = "1"
        ri4.children[4].style.transform = " rotateZ(0deg)"
        ri4.children[4].style.opacity = "1"

    }
    if (document.documentElement.scrollTop >= 3500) {

        le5.children[0].style.opacity = "1"
        le5.children[1].style.transform = " translateY(0px)"
        le5.children[1].style.opacity = "1"
        le5.children[2].style.transform = " translateY(0px)"
        le5.children[2].style.opacity = "1"
        le5.children[3].style.transform = " translateY(0px)"
        le5.children[3].style.opacity = "1"
        le5.children[4].style.transform = " translateY(0px)"
        le5.children[4].style.opacity = "1"
        le5.children[5].style.transform = " translateY(0px)"
        le5.children[5].style.opacity = "1"
        le5.children[6].style.transform = " translateY(0px)"
        le5.children[6].style.opacity = "1"
        le5.children[7].style.transform = " translateY(0px)"
        le5.children[7].style.opacity = "1"
        le5.children[8].style.transform = " translateY(0px)"
        le5.children[8].style.opacity = "1"
        ri5.style.transform = "translateX(0px)"
        ri5.style.opacity = "1"
    }

})